<template>
  <div class="login-wrapper">
    <div class="top">
      <ele-text type="heading" size="xxl" style="color: #fff; font-family: 'AliPuHui' ">
        {{ '安全保卫综合管理平台' }}
      </ele-text>
    </div>
    <div class="main">
      <div class="left"></div>
      <div class="right">
        <ele-text type="heading" size="xl"
          style="margin-bottom: 1vh; text-align: center;color: #fff; letter-spacing: 0.5rem;">
          {{ '欢迎登陆' }}
        </ele-text>
        <el-form ref="formRef" :model="form" size="large" :rules="rules" @keyup.enter="submit">
          <el-form-item prop="username">
            <el-input clearable v-model="form.username" placeholder="请输入用户名" :prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password v-model="form.password" placeholder="请输入密码" :prefix-icon="Lock" />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.remember">
              记住密码
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button size="large" color="#5384d9" :loading="loading" style="width: 100%" @click="submit">
              {{ '登陆' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="logo"></div>
    </div>
    <div class="footer">
      <ele-text type="secondary" size="lg" style="color: #fff; font-family: 'AliPuHui'">
        {{ '本系统由库铂软件提供技术支持' }}
      </ele-text>
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
  * import
  */

// vue
import { ref, reactive, unref, computed } from 'vue';
// vue 框架相关
import { useRouter } from 'vue-router';
// element-plus
import type { FormInstance, FormRules } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
// ele-admin-plus
import { EleMessage } from 'ele-admin-plus/es';
// utils
import { getAccount, saveAccount } from '@/utils/account-utils';
import { setToken, getToken } from '@/utils/token-util';
import StrUtil from '@/utils/string-util';
import { usePageTab } from '@/utils/use-page-tab';
// api
import { login } from '@/api/auth/index';
// api model
import type { LoginForm } from '@/api/auth/model/view';
import { onMounted } from 'vue';

/**
 * data
 */

const { currentRoute } = useRouter();
const { goHomeRoute } = usePageTab();
// 表单
const formRef = ref<FormInstance>();
// 表单数据
const form = reactive<LoginForm>({
  username: '',
  password: '',
  remember: true
});
// 表单验证规则
const rules = computed<FormRules>(() => {
  return {
    username: [
      {
        required: true,
        message: "请输入用户名",
        type: 'string',
        trigger: 'blur'
      }
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        type: 'string',
        trigger: 'blur'
      }
    ]
  };
});
// 登录提交状态
const loading = ref(false);

/**
 * methods
 */

// 提交
const submit = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    login({ username: form.username, password: form.password })
      .then((res) => {
        EleMessage.success('登录成功');
        saveAccount(form);
        setToken(res.data, form.remember)
        goHome();
      })
      .catch((err) => {
        EleMessage.error(err.message)
      })
  });
};
// 跳转到首页
const goHome = () => {
  const { query } = unref(currentRoute);
  goHomeRoute(query.from as string);
};

/**
 * onmounted
 */

onMounted(() => {
  // token 存在直接进入首页
  // 否则获取缓存中的用户账户信息
  if (getToken()) {
    goHome();
  } else {
    const account = getAccount();
    if (!StrUtil.isEmpty(account)) {
      form.username = account.username;
      form.password = account.password;
      form.remember = account.remember;
    }
  }
});
</script>

<style lang="scss" scoped>
.login-wrapper {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-image: url('/src/assets/login-bgimg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.top {
  width: 35vw;
  height: 6vh;
  // border: 1px solid gray;
  margin-top: 3vh;
  text-align: center;
  line-height: 6vh;
  letter-spacing: 0.6rem;
}

.main {
  width: 70vw;
  height: 70vh;
  // border: 1px solid gray;
  display: flex;
  position: relative;
  align-items: center;

  .left {
    flex: 3;
    height: 100%;
    background-image: url('/src/assets/login-minimg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // border: 1px solid gray;
  }

  .right {
    flex: 1;
    height: 65%;
    padding: 4vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    // border: 1px solid gray;
    background-image: url('/src/assets/login-loginimg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }


  .logo {
    position: absolute;
    width: 10vw;
    height: 9vh;
    // border: 1px solid gray;
    top: 0vh;
    left: -5vw;
  }
}

.footer {
  width: 35vw;
  height: 4vh;
  // border: 1px solid gray;
  margin-bottom: 5vh;
  text-align: center;
  line-height: 5vh;
  letter-spacing: 0.6rem;
  text-wrap: nowrap
}

:deep(.el-form) {
  width: 100%;
  background: transparent;
}

:deep(.el-form-item__content) {
  background: transparent !important;
  font-size: 1.2rem;
}

:deep(.el-input__wrapper) {
  background-color: rgba(6, 135, 205, 0.3);
  border-radius: 0 !important;
}

:deep(.el-input) {
  --el-border-color: none;
  --el-input-text-color: white;
  font-size: 1.05rem;
}

/* 阿里巴巴普惠体 */
@font-face {
  font-family: 'AliPuHui';
  font-weight: 300;
  src: (url('//at.alicdn.com/wf/webfont/jWZHcEP2lzge/5AfKUTWZEo8W.woff2') format('woff2'),
      url('//at.alicdn.com/wf/webfont/jWZHcEP2lzge/Dvhs41TtRdYF.woff') format('woff'));
  font-display: swap;
}

// 小屏幕适应
@media screen and (max-width: 680px) {
  .login-wrapper {
    padding: 0;
    display: block;
    background: #fff;
  }
}
</style>

<style lang="scss">
html.dark .login-wrapper {
  background: #000;
}
</style>
